<template>
  <main class=" pug-pro-basicLayout-content pug-pro-basicLayout-has-header">
    <div v-show="sketon" class="pug-pro-grid-content">
      <div class="pug-pro-grid-content-children">
        <div class="pug-row" style="margin-left: -12px; margin-right: -12px; row-gap: 0px;">
          <div v-for="(item,index) in orderStateArr" :class="[index==0?'pug-col-xl-4':'pug-col-xl-5']"
               class="pug-col pug-col-xs-24 pug-col-sm-12 pug-col-md-12 pug-col-lg-12 "
               style="padding-left: 12px; padding-right: 12px; margin-bottom: 24px;">
            <div class="pug-card">
              <div class="pug-card-body" :class="[index==0?'active':'']" style="padding: 20px 24px 8px;">
                <div class="chartCard___3TM4T">
                  <div class="chartTop___3iur-">
                    <div class="avatar___FoC4K"></div>
                    <div class="metaWrap___3Nuv1">
                      <div class="meta___1_3lt"><span>{{ item.title }}</span></div>
                      <div class="total___D6PP7"><span>¥ {{ toDot(item.price) }}</span><span
                        class="fz14"> / {{ item.count }}</span></div>
                    </div>
                  </div>
                  <div class="content___yyFJS" style="height: 46px;">
                    <div class="contentFixed___3tZUw">
                      <div class="trendItem___2dudO" title="" style="margin-right: 16px;"><span>最大<span
                        class="trendText___3J91q">¥{{ toDot(item.maxprice) }}</span></span><span
                        class="up___1wFiw"><span role="img"
                                                 aria-label="caret-up"
                                                 class="anticon anticon-caret-up"><svg
                        viewBox="0 0 1024 1024" focusable="false" data-icon="caret-up" width="1em" height="1em"
                        fill="currentColor" aria-hidden="true"><path
                        d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span></span>
                      </div>
                      <div class="trendItem___2dudO" title=""><span>最小<span
                        class="trendText___3J91q">¥{{ toDot(item.minprice) }}</span></span><span
                        class="down___2tA2-"><span role="img" aria-label="caret-down"
                                                   class="anticon anticon-caret-down"><svg viewBox="0 0 1024 1024"
                                                                                           focusable="false"
                                                                                           data-icon="caret-down"
                                                                                           width="1em" height="1em"
                                                                                           fill="currentColor"
                                                                                           aria-hidden="true"><path
                        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pug-row" style="margin-left: -12px; margin-right: -12px; row-gap: 0px;">
          <div class="pug-col pug-col-xs-24 pug-col-sm-12 pug-col-md-12 pug-col-lg-12 pug-col-xl-6"
               style="padding-left: 12px; padding-right: 12px; margin-bottom: 24px;">
            <div class="pug-card">
              <div class="pug-card-body" style="padding: 20px 24px 8px;">
                <div class="chartCard___3TM4T">
                  <div class="chartTop___3iur-">
                    <div class="avatar___FoC4K"></div>
                    <div class="metaWrap___3Nuv1">
                      <div class="meta___1_3lt">
                        <span>后台访问浏览器占比</span>
                      </div>
                      <div id="brosercharts" style="width: 300px;height: 300px;"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pug-col pug-col-xs-24 pug-col-sm-12 pug-col-md-12 pug-col-lg-12 pug-col-xl-6"
               style="padding-left: 12px; padding-right: 12px; margin-bottom: 24px;">
            <div class="pug-card">
              <div class="pug-card-body" style="padding: 20px 24px 8px;">
                <div class="chartCard___3TM4T">
                  <div class="chartTop___3iur-">
                    <div class="avatar___FoC4K"></div>
                    <div class="metaWrap___3Nuv1">
                      <div class="meta___1_3lt">
                        <span>后台访问操作系统占比</span>
                      </div>
                      <div id="oscharts" style="width: 300px;height: 300px;"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pug-col pug-col-xs-24 pug-col-sm-12 pug-col-md-12 pug-col-lg-12 pug-col-xl-12"
               style="padding-left: 12px; padding-right: 12px; margin-bottom: 24px;">
            <div class="pug-card">
              <div class="pug-card-body" style="padding: 20px 24px 8px;">
                <div class="chartCard___3TM4T">
                  <div class="chartTop___3iur-">
                    <div class="avatar___FoC4K"></div>
                    <div class="meta___1_3lt">
                      <span>方法的耗时总排名</span>
                      <input type="text" v-model="timer">
                      <button @click="searchMethodByTimer">搜索</button>
                    </div>
                    <div id="methodcharts" style="width: 99%;height: 300px;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pug-card">
          <div class="pug-card-body" style="padding: 0px;">
            <div class="salesCard___1Iqf3" style="">
              <div class="pug-tabs pug-tabs-top pug-tabs-large">
                <div role="tablist" class="pug-tabs-nav" style="margin-bottom: 24px;">
                  <div class="pug-tabs-nav-wrap">
                    <div class="pug-tabs-nav-list" style="transform: translate(0px, 0px);">
                      <div class="pug-tabs-tab pug-tabs-tab-active">
                        <div role="tab" aria-selected="true" class="pug-tabs-tab-btn" tabindex="0"
                             id="rc-tabs-2-tab-sales" aria-controls="rc-tabs-2-panel-sales">销售额
                        </div>
                      </div>
                      <div class="pug-tabs-tab">
                        <div role="tab" aria-selected="false" class="pug-tabs-tab-btn" tabindex="0"
                             id="rc-tabs-2-tab-views" aria-controls="rc-tabs-2-panel-views">访问量
                        </div>
                      </div>
                      <div class="pug-tabs-ink-bar pug-tabs-ink-bar-animated" style="left: 0px; width: 48px;"></div>
                    </div>
                  </div>
                  <div class="pug-tabs-nav-operations pug-tabs-nav-operations-hidden" style="margin-bottom: 24px;">
                    <button type="button" class="pug-tabs-nav-more" tabindex="-1" aria-hidden="true"
                            aria-haspopup="listbox" aria-controls="rc-tabs-2-more-popup" id="rc-tabs-2-more"
                            aria-expanded="false" style="visibility: hidden; order: 1;"><span role="img"
                                                                                              aria-label="ellipsis"
                                                                                              class="anticon anticon-ellipsis"><svg
                      viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em"
                      fill="currentColor" aria-hidden="true"><path
                      d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span>
                    </button>
                  </div>
                  <div class="pug-tabs-extra-content">
                    <div class="salesExtraWrap___1k1PZ">
                      <div class="salesExtra___3lIXj"><a class="">今日</a><a class="">本周</a><a class="">本月</a><a
                        class="currentDate___7lDDb">本年</a></div>
                      <div class="pug-picker pug-picker-range" style="width: 256px;">
                        <div class="pug-picker-input pug-picker-input-active"><input readonly="" placeholder="开始日期"
                                                                                     size="12" autocomplete="off"
                                                                                     value="2022-01-01"></div>
                        <div class="pug-picker-range-separator"><span aria-label="to" class="pug-picker-separator"><span
                          role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg
                          viewBox="0 0 1024 1024" focusable="false" data-icon="swap-right" width="1em" height="1em"
                          fill="currentColor" aria-hidden="true"><path
                          d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span>
                        </div>
                        <div class="pug-picker-input"><input readonly="" placeholder="结束日期" size="12" autocomplete="off"
                                                             value="2022-12-31"></div>
                        <div class="pug-picker-active-bar" style="left: 0px; width: 91px; position: absolute;"></div>
                        <span class="pug-picker-suffix"><span role="img" aria-label="calendar"
                                                              class="anticon anticon-calendar"><svg
                          viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em"
                          fill="currentColor" aria-hidden="true"><path
                          d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></span><span
                        class="pug-picker-clear"><span role="img" aria-label="close-circle"
                                                       class="anticon anticon-close-circle"><svg viewBox="64 64 896 896"
                                                                                                 focusable="false"
                                                                                                 data-icon="close-circle"
                                                                                                 width="1em"
                                                                                                 height="1em"
                                                                                                 fill="currentColor"
                                                                                                 aria-hidden="true"><path
                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="pug-tabs-content-holder">
                  <div class="pug-tabs-content pug-tabs-content-top">
                    <div role="tabpanel" tabindex="0" aria-hidden="false"
                         class="pug-tabs-tabpane pug-tabs-tabpane-active" id="rc-tabs-2-panel-sales"
                         aria-labelledby="rc-tabs-2-tab-sales">
                      <div class="pug-row" style="row-gap: 0px;">
                        <div class="pug-col pug-col-xs-24 pug-col-sm-24 pug-col-md-12 pug-col-lg-12 pug-col-xl-12">
                          <div class="salesBar___3JP41">
                            <div data-chart-source-type="G2Plot" size-sensor-id="29" style="height: inherit;">
                              <div style="position:relative;">

                                <div id="ordercharts" style="width: 100%;height: 300px"></div>

                                <div class="g2-tooltip"
                                     style="position: absolute; visibility: hidden; z-index: 8; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgb(255, 255, 255); box-shadow: rgb(174, 174, 174) 0px 0px 10px; border-radius: 3px; color: rgb(89, 89, 89); font-size: 12px; font-family: &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; line-height: 12px; padding: 0px 12px; opacity: 0.95; pointer-events: none; left: 853px; top: 7.85938px;">
                                  <div class="g2-tooltip-title" style="margin-bottom: 12px; margin-top: 12px;">12月</div>
                                  <ul class="g2-tooltip-list" style="margin: 0px; list-style-type: none; padding: 0px;">
                                    <li class="g2-tooltip-list-item" data-index=""
                                        style="list-style-type: none; padding: 0px; margin: 12px 0px;">
                                      <span class="g2-tooltip-marker"
                                            style="background: rgb(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px;"></span>
                                      <span class="g2-tooltip-name">销售量</span>:
                                      <span class="g2-tooltip-value"
                                            style="display: inline-block; float: right; margin-left: 30px;">931</span>
                                    </li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-col pug-col-xs-24 pug-col-sm-24 pug-col-md-12 pug-col-lg-12 pug-col-xl-8">
                          <div class="salesRank____67l0"><h4 class="rankingTitle___28H5N">门店销售额排名</h4>
                            <ul class="rankingList___2GuWM">
                              <li><span class="rankingItemNumber___31ZrU active___3Bsi9">1</span><span
                                class="rankingItemTitle___2Yoy1" title="工专路 0 号店">工专路 0 号店</span><span>323,234</span>
                              </li>
                              <li><span class="rankingItemNumber___31ZrU active___3Bsi9">2</span><span
                                class="rankingItemTitle___2Yoy1" title="工专路 1 号店">工专路 1 号店</span><span>323,234</span>
                              </li>
                              <li><span class="rankingItemNumber___31ZrU active___3Bsi9">3</span><span
                                class="rankingItemTitle___2Yoy1" title="工专路 2 号店">工专路 2 号店</span><span>323,234</span>
                              </li>
                              <li><span class="rankingItemNumber___31ZrU ">4</span><span
                                class="rankingItemTitle___2Yoy1" title="工专路 3 号店">工专路 3 号店</span><span>323,234</span>
                              </li>
                              <li><span class="rankingItemNumber___31ZrU ">5</span><span
                                class="rankingItemTitle___2Yoy1" title="工专路 4 号店">工专路 4 号店</span><span>323,234</span>
                              </li>
                              <li><span class="rankingItemNumber___31ZrU ">6</span><span
                                class="rankingItemTitle___2Yoy1" title="工专路 5 号店">工专路 5 号店</span><span>323,234</span>
                              </li>
                              <li><span class="rankingItemNumber___31ZrU ">7</span><span
                                class="rankingItemTitle___2Yoy1" title="工专路 6 号店">工专路 6 号店</span><span>323,234</span>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div role="tabpanel" tabindex="-1" aria-hidden="true" class="pug-tabs-tabpane"
                         id="rc-tabs-2-panel-views" aria-labelledby="rc-tabs-2-tab-views" style="display: none;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
// 导入
import * as echarts from 'echarts';
import {mapGetters} from 'vuex'
// 获取操作系统的os服务端返回的charts的数据
import loadStateOs from '@/services/adminlogs/oschart';
import loadStateBroswer from '@/services/adminlogs/broswercharts';
import loadStateMethod from '@/services/adminlogs/methodcharts';
import loadStateOrder from '@/services/adminlogs/ordercharts';
import loadOrderStateRelation from '@/services/order/ordercharts';

export default {
  name: "Home.vue",
  components: {},
  data() {
    return {
      timer: 100,
      sketon: true,
      orderStateArr: [],
      browserResult: []
    }
  },

  computed: {
    ...mapGetters('login', ["permissionObj"])
  },

  async mounted() {

    if (this.permissionObj["12001"]) {
      // 初始化执行浏览器占比
      var brosweroption = await loadStateBroswer();
      this.loadCharts("brosercharts", brosweroption);
    }

    if (this.permissionObj["12002"]) {
      // 初始化操作系统占比
      var osoption = await loadStateOs();
      this.loadCharts("oscharts", osoption);
    }

    if (this.permissionObj["12003"]) {
      // 初始化操作系统占比
      var methodoption = await loadStateMethod(this.timer);
      this.loadCharts("methodcharts", methodoption);
    }

    if (this.permissionObj["120"]) {
      // 初始化操作系统占比
      var orderoption = await loadStateOrder(this.timer);
      this.loadCharts("ordercharts", orderoption);
      // 初始化订单统计占比
      this.orderStateArr = await loadOrderStateRelation();
    }
  },


  methods: {
    async searchMethodByTimer() {
      // 初始化操作系统占比
      var methodoption = await loadStateMethod(this.timer);
      this.loadCharts("methodcharts", methodoption);
    },

    toDot(value) {
      return parseFloat(value).toFixed(2);
    },

    // 封装一个方法
    loadCharts(id, options) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(id));
      // 绘制图表
      myChart.setOption(options);
    }
  }
}
</script>

<style>
.chartsbox2 {
  display: grid;
  padding: 10px 10px 10px;
}

.pug-card-body.active {
  background: #5470c6;
  color: #fff;
}

.pug-card-body.active * {
  color: #fff !important;
}

.chartsbox {
  display: grid;
  padding: 10px;
  grid-template-columns: repeat(3, 32.5%);
  justify-content: space-between;
  grid-template-rows: repeat(1, 50%);
  gap: 2% 1%;
}

.chartsbox2 div.chartbox, .chartsbox div.chartbox {
  box-shadow: 0 0 1em #eee;
  width: 100% !important;
}

.chartsbox canvas,
.chartsbox2 canvas {
  width: 100% !important;
}

@keyframes loading {
  0% {
    background-position: -400px 0
  }

  100% {
    background-position: 400px 0
  }
}

.box1 {
  position: absolute;
  margin: 0 auto;
  left: 50%;
  margin-left: -400px;
  top: 0;
  width: 800px;
  height: 60px;
  background-color: blue;
  background-image: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: loading;
  animation-timing-function: linear;
  transition: 0.3s;
}

.bgMasker {
  background-color: #fff;
}

.line1 {
  background-color: #fff;
  height: 20px;
  position: absolute;
  right: 0;
  top: 0;
  left: 60px;
}

.line2 {
  background-color: #fff;
  height: 20px;
  position: absolute;
  right: 700px;
  top: 20px;
  left: 60px;
}

.line3 {
  background-color: #fff;
  height: 20px;
  position: absolute;
  left: 400px;
  right: 0;
  top: 20px;
}

.line4 {
  background-color: #fff;
  height: 20px;
  top: 40px;
  position: absolute;
  left: 60px;
  right: 500px;
}

.line5 {
  background-color: #fff;
  height: 20px;
  position: absolute;
  left: 600px;
  right: 0;
  top: 40px;
}
</style>
